<template>
  <div class="w-101 border rounded position-absolute bg-white"
       style="z-index: 100000;line-height: 20px"
       v-show="visible"
       :style="style" >
    <div class="m-1 h-20">
      <el-link type="primary" @click="handleClick('1')" :underline="false" icon="el-icon-arrow-left">关闭左侧</el-link>
    </div>
    <div class="m-1 h-20">
      <el-link type="primary" @click="handleClick('2')"  :underline="false" icon="el-icon-arrow-right">关闭右侧</el-link>
    </div>
    <div class="m-1 h-20">
      <el-link type="primary" @click="handleClick('3')"  :underline="false" icon="el-icon-remove-outline">关闭其他</el-link>
    </div>
    <div class="m-1 h-20">
      <el-link type="primary" @click="handleClick('4')"  :underline="false" icon="el-icon-close">关闭全部</el-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuOpt",
  props: {
    visible: {
      type: Boolean,
      required: false,
      default: false
    },
    position: {
      type: Object,
      required: false,
      default: ()=> {
         return {
           left:0,
           top:0
         }
      }
    },
    contextTab:{
      type: Object,
      required: false,
      default: ()=> {
        return {
        }
      }
    }
  },
  data () {
    return {
      left: 100,
      top: 0,
      target: null,
      meta: null,
      selectedKeys: []
    }
  },
  computed: {
    style () {
      return {
        left: this.position.left + 'px',
        top: this.position.top + 'px'
      }
    }
  },
  created () {
    window.addEventListener('click', this.closeMenu)
  },
  beforeDestroy() {
    window.removeEventListener('click', this.closeMenu)
  },
  methods: {
    closeMenu () {
      this.$emit('update:visible', false)
    },
    handleClick (key) {
      this.$emit('select', key, this.contextTab)
      this.closeMenu()
    }
  }
}
</script>

<style scoped>

</style>
